<template>
	<view>
		<z-paging :fixed="true" :default-page-size="1000" ref="paging" v-model="list" @query="queryList">
			<view class="word-box">
				<view class="word-box-item word-box-hover d-s-c" v-for="(item, index) in list" :key="index"
					@tap="wordClick(index)">
					<view class="ww75 d-s-c">
						<wordTip :item="item"></wordTip>
						<view class="f40 fb mr30">{{ item.word }}</view>
						<view class="f32 fb mr30" v-if="(currentIndex == index && clickTimes == 2) || item.check">
							{{ item.chinese }}</view>
					</view>
					<view class="ww25 d-e-c">
						<view class="word-box-item-check presdete_top_item_box1 d-c-c mr20"
							:class="{'checked':item.check==1}" @tap.stop="wordCheck(index, 1)">
							<u-icon name="checkmark" color="#ffffff" size="36"></u-icon>
						</view>
						<view class="word-box-item-check presdete_top_item_box2 d-c-c"
							:class="{'checked':item.check==2}" @tap.stop="wordCheck(index, 2)">
							<u-icon name="close" color="#ffffff" size="36"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="word-operate d-b-c tc" slot="bottom">
				<view class="">
					<view class="f32 fb" style="color: #0B99FE;">{{ totalNum }}</view>
					<view class="gray9">总数</view>
				</view>
				<view class="">
					<view class="f32 fb" style="color: #70DA11;">{{ ableNum }}</view>
					<view class="gray9">正确</view>
				</view>
				<view class="">
					<view class="f32 fb" style="color: #FF165D;">{{ unableNum }}</view>
					<view class="gray9">错误</view>
				</view>
				<view class="">
					<view class="f32 fb" style="color: #0B99FE;">{{ accuracy }}%</view>
					<view class="gray9">正确率</view>
				</view>
				<view class="word-operate-submit" @tap="submit">提交</view>
			</view>
		</z-paging>
		<studyFinish v-model="isShow" @continueWord="continueWord" @endStudy="endStudy"></studyFinish>
	</view>
</template>

<script>
	import studyFinish from '../components/studyFinish/studyFinish.vue'
	import wordTip from '@/pages/components/wordTootip.vue'
	export default {
		components: {
			wordTip,
			studyFinish
		},
		
		data() {
			return {
				isShow:false,
				studyId: 0,
				show: false,
				totalNum: 0,
				ableNum: 0,
				unableNum: 0,
				ids: '',
				accuracy: 0,
				isTest: 0,
				list: [],
				result1: 0,
				result2: 0,
				currentIndex: -1,
				clickTimes: 0,
			}
		},
		onLoad(option) {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 1500)
				return false
			} else {
				if (option.studyId) {
					this.studyId = option.studyId
				} else {
					uni.navigateBack()
				}
			}
		},
		onBackPress(option) {
			if (option.from == 'navigateBack' || option.from == 'backbutton') {
				this.modalShow()
				return true
			}
			return false
		},
		methods: {
			continueWord(){},
			endStudy(){},
			// 页面返回弹窗提示
			modalShow() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否提交学后检测',
					confirmColor: '#4BB0FF',
					success: function (res) {
						if (res.confirm) {
							that.submit()
						}
					}
				})
			},
			queryList(pageNo, pageSize) {
				this.$u.get(this.$u.api.learnCheck, {
					pageNo: pageNo,
					pageSize: pageSize,
					studyId: this.studyId,
					voiceType: this.$store.state.voiceType,
				}).then((res) => {
					if (res.code == 1) {
						this.totalNum = res.data.length
						res.data.forEach(item => {
							item.show = false
							item.check = false
						})
						this.$refs.paging.complete(res.data)
					} else {
						this.$refs.paging.complete(false)
					}
				}).catch((res) => {
					this.$refs.paging.complete(false)
				})
			},
			// 点击单词
			wordClick(i) {
				if (this.currentIndex == i) {
					if (this.clickTimes == 0) {
						this.clickTimes = 1
					} else if (this.clickTimes == 1) {
						this.clickTimes = 2
					} else if (this.clickTimes == 2) {
						this.clickTimes = 0
					} else {
						return false
					}
				} else {
					this.clickTimes = 1
				}
				this.currentIndex = i
				// this.list[i].show = true

				let audio = this.list[i].audio_url
				this.playAudio(audio)
			},
			// 发音
			playAudio(audio) {
				if (audio) {
					this.utils.playAudio(audio)
				}
			},
			// 选择单词
			wordCheck(i, n) {
				if (this.list[i].check == n) {
					this.list[i].check = 0
				} else {
					this.list[i].check = n
					if (i < this.list.length - 1) {
						let audio = this.list[i + 1].audio_url
						this.playAudio(audio)
					}
				}
				let able = 0
				let unable = 0
				let idArray = []
				for (let j = 0; j < this.list.length; j++) {
					let words = this.list[j]
					if (words.check == 1) {
						able += 1
					}
					if (words.check == 2) {
						unable += 1
						idArray.push(words.id)
					}
				}
				this.ableNum = able
				this.unableNum = unable
				this.ids = idArray.join(',')
				this.accuracy = Math.round(able * 100 / this.totalNum)

			},
			// 提交
			submit() {
				if (this.totalNum != this.ableNum + this.unableNum) {
					uni.$u.toast('还有未检测的单词，请仔细检查')
					return false
				}
				this.$u.post(this.$u.api.learnCheck, {
					ids: this.ids,
				}).then((res) => {
					uni.$u.toast('提交成功')
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 2000)
				}).catch((res) => {
					console.log(res)
					uni.$u.toast('提交失败')
					return false
				})
			},
		},
	}
</script>

<style lang="scss" scoped>

</style>